import React, { useState } from 'react'
import { Layout, Button } from 'antd'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import ControlPanel from './components/ControlPanel'
import { useThemeStore } from '@/stores'
import './index.css'
import ThreeDSimulator from '@/components/3DSimulator'

const { Content, Sider } = Layout

const ModelViewer: React.FC = () => {
  const [collapsed, setCollapsed] = useState(true)
  const theme = useThemeStore(state => state.theme)

  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
  }

  return (
    <Layout
      style={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
    >
      <Layout
        style={{ flex: 1, display: 'flex', flexDirection: 'row', minHeight: 0, overflow: 'hidden' }}
      >
        <Sider
          collapsible={false}
          collapsed={collapsed}
          theme={theme === 'dark' ? 'dark' : 'light'}
          width={300}
          style={{
            overflow: 'auto',
          }}
        >
          <div style={{ padding: '16px', paddingBottom: collapsed ? '16px' : '0' }}>
            <Button
              type="primary"
              onClick={toggleCollapsed}
              style={{
                width: '50px',
                marginBottom: collapsed ? 0 : 16,
              }}
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            >
              {!collapsed}
            </Button>
          </div>
          {!collapsed && <ControlPanel collapsed={collapsed} />}
        </Sider>

        {/* 主视图区 - 70% */}
        <Content
          style={{
            flex: 1,
            position: 'relative',
            padding: 0,
            overflow: 'hidden',
            height: '100%',
            minHeight: 0,
          }}
        >
          <div className="viewer-area">
            <div className="canvas-container">
              <div className="canvas-placeholder">
                <ThreeDSimulator />
              </div>
            </div>
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default ModelViewer
